<template>
  <div id="bai-du-map">
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: 'ac39cf689ae65171f5ee223c79bc2661',
}
export default {
  data() {
    return {
      map: null,
      mouseTool: null,
      overlays: [],
      auto: null,
      placeSearch: null,
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      AMapLoader.load({
        "key": "f094244f5061d88b090d2365ed2066e7",
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // "plugins": [ ],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 初始化地图
        this.map = new AMap.Map('bai-du-map', {
          viewMode: "2D",  //  是否为3D地图模式
          zoom: 13,   // 初始化地图级别
          center: [113.65553, 34.748764], //中心点坐标  郑州
          resizeEnable: true
        });
        this.map.on("click", this.showInfoClick);
      }).catch(e => {
        console.log(e);
      });
    },
    showInfoClick(e) {
      this.map.clearMap();//清理地图
      let lng = e.lnglat.getLng(); //获取经度
      let lat = e.lnglat.getLat(); //获取纬度

      this.$emit("mapClick", { lng, lat })
    }

  }
}
</script>

<style  lang="less" scoped>
#bai-du-map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑"
}

.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}
</style>
